<template>
	<view>
		<view class="top">
			<view class="title">
				{{mainTitle}}
			</view>
			<view class="titleRemark">
				智慧财富管理机构  
			</view>
			<view class="cjwriter">{{writer}}</view>
			<view class="banner">
				<image class="bannerImg" :src="imgUrl" mode=""></image>
			</view>
			<view class="videoBox" style="height: 200upx;">
				<audio class="audio" :src="soundUrl"
				 poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg" name="智能财富管理机构，秀实投资集团" author="今天" :action="audioAction" controls>
				 </audio> 
			</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in caijingList" :key="item.type">
				<view  v-if="item.type=='特别关注'">
					<!-- 特别关注 -->
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/tbguanzhu.png" mode=""></image>
					</view>
					
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">特别关注</span>
					</p>
					
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
				<view  v-if="item.type=='宏观'">
					<!-- 宏观 --> 
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/hongguan.png" mode=""></image>
					</view>
					 
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">宏观经济</span>
					</p>
					 
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
				<view  v-if="item.type=='地产'">
					<!-- 地产 -->
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/dichan.png" mode=""></image>
					</view>
					 
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">地产聚焦</span>
					</p>
					 
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
				<view  v-if="item.type=='金融'">
					<!-- 金融 -->
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/jinrong.png" mode=""></image>
					</view>
					 
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">金融洞察</span>
					</p>
					 
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
				<view  v-if="item.type=='公司动态'">
					<!-- 公司动态 -->
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/gsdt.png" mode=""></image>
					</view>
					 
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">公司要闻</span>
					</p>
					 
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
				<view  v-if="item.type=='海外'">
					<!-- 海外 -->
					<view class="bannerlaber">
						<image class="bannerImglaber" src="../../../static/image/caijinkb/haiwai.png" mode=""></image>
					</view>
					 
					<p style="margin-top: 0px;margin-bottom: 0px;margin-left: 1em;padding: 0px;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;line-height: 1.4em;word-wrap: break-word !important;box-sizing: border-box !important;"><span style="margin: 0px;padding: 0.2em 0.5em;border-width: 0px;border-style: initial;border-color: initial;max-width: 100%;font-family: inherit;border-radius: 0.3em;color: rgb(255, 255, 255);text-align: center;font-size: 14px;background-color: rgb(224, 173, 43);word-wrap: break-word !important;box-sizing: border-box !important;">国际经济</span>
					</p>
					 
					<section style="margin: -0.7em 0px 0px;padding: 1.4em 1em 1em;border-width: 1px;border-style: solid;border-color: rgb(192, 200, 209);max-width: 100%;border-radius: 0.3em;color: rgb(51, 51, 51);font-size: 1em;font-family: inherit;background-color: rgb(239, 239, 239);word-wrap: break-word !important;box-sizing: border-box !important;">
						<rich-text class="richtext" :nodes="string">
							<span v-html="item.content"></span>
						</rich-text>
					</section>
				</view>
				
			</view> 
			 
			<view class="weiba">
				<image class="bannerImgweiba" src="../../../static/image/caijinkb/weiba.gif" mode=""></image>
			</view>
			<view class="remark">
				<view style="padding: 48upx 20upx 16upx 20upx">
					【免责声明】
				</view>
				<view style="padding: 8upx 20upx 16upx 20upx">
				本文信息来源自网络，本平台不对文章信息或资料的真实性、有效性、准确性及完整性承担责任。
				仅供阅读参考，如有侵权请联系删除。本文亦不构成任何投资建议。市场有风险，投资须谨慎。
				</view>
				<view style="padding: 38upx 20upx 26upx 240upx">
					扫码关注“耀莱财富”
				</view>
				<view style="padding: 38upx 20upx 0 250upx">
					打开智慧财富之门
				</view>
				<view style="padding: 38upx 20upx 0 320upx">
					↓↓↓
				</view>
			</view>
			
			
		</view> 
		<view class="erweima">
			<image class="bannerImgerweima" src="../../../static/image/caijinkb/640.gif" mode=""></image>
		</view>			
		<view class="contentBot" style="margin-bottom: 152upx;">
			<view class="contentMid">
				<view class="videoDetail uni-font17">
					<view class="">
						相关评论
					</view>
				</view>
			</view>
			<view  class="mark" v-for="(item,cindex) in cjpingLunList" :key="item.index">
				<view class="avator-left">
					<image src="../../../static/image/invest/Koala.jpg" v-if="item.iconUrl==null||item.iconUrl==''" />
					<image :src="item.iconUrl" v-else />
				</view>
				<view class="mark-right">
					<view class="mark-top">
						<view class="mark-top-left">
							<view class="position" v-if="item.ayms_Flg =='Y'">匿名用户</view>
							<view class="position" v-else>{{item.user_Id}}</view>
							<view class="name"></view>
						</view>
					</view>
				
					<!--<view class="mark-bot twoLines">-->
					<view class="time">
						{{item.answ_Check_User}}
						<!--9小时前-->
					</view>
					<view class="mark-bot">
						<!--评论内容-->{{item.answ_Dtl}}
					</view>
				</view>
			</view>
			<view  @click="getMoreList" class="more-mark" v-if="showMoreDiv"><label class="iconfont">&#xe65e;</label>查看更多评论</view>

		</view>
		
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		
		<view class="bottom">
			<view class="bottom-tab">
				<view class="bottom-item" @click="toPinglun">
					<view class="bottom-icon">
						<image class="bottom-icon-image" src="http://t.cn/EcTffNp" />
		
					</view>
					<view class="bottom-text">写评论</view>
				</view>
			</view>
		</view>
			
	</view>
		
		
		<!-- <view class="bottom">
			<writemarkTemp></writemarkTemp>
		</view> -->
</template>
<script>
	var _self, page = 1;
	import writemarkTemp from '../../../components/writemark-temp.vue';
	import global from '../../../components/tool/homePageQuery.vue';
	import global_ from '../../../components/tool/productGlobal';
	import uniLoadMore from '../../../components/uni-load-more-pinglun';
	export default {
		components:{
			writemarkTemp,
			uniLoadMore
		}, 
		data() { 
			return {
				token:"",
				url:global_.api.PRODUCT_PAGE_PAI,
				mainTitle:"",
				soundUrl:"",
				writer:"",
				title: "",
				string: '',
				imgUrl:'',
				caijingList:[],
				providerList: [],
				cjpingLunList:[],
				newId:'',
				bL_ID:'',
				imgMusic:'../../../static/image/caijinkb/player.jpg',
				audioAction: {
					method: 'pause'
				},
				loadingType: 0,
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				showMoreDiv:false
			}
		},
		onLoad(e) {
			page=1;
			uni.showLoading({
			});
			uni.getProvider({
				service: "share",
				success: (e) => {
					let data = []
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin'
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type: 'WXSenceTimeline'
								})
								break;
							case 'qq':
								data.push({
									name: '分享到QQ',
									id: 'qq'
								})
								break;
							default:
								break;
						}
					}
					this.providerList = data;
				},
				fail: (e) => {
					console.log("获取登录通道失败", e);
				}
			});
			
			var usrtaken = uni.getStorageSync('token_key');
			this.token = usrtaken;
			var queryId = e.newsid;
			this.newId = queryId;
			console.log("查询的ID----------------"+queryId)
			uni.request({
				url: global.api.queryFinanceNews,
				method: 'POST', 
				header : {'content-type':'application/x-www-form-urlencoded'},
				data: {  
					queryID: queryId,
					token: usrtaken,
					queryType: 'CJ'
				}, 
				dataType:'json',
				success: res => {
					console.log(res)
					var cjData = new Object();
					cjData = res.data.data;
					var caijingkb = new Array();
					caijingkb = cjData.newsList;
					console.log("财经快报详情~~~~~~~~~~~~~~~~~~~~"+JSON.stringify(caijingkb))
					var cjAllList=new Array();
					for (var i = 0; i < caijingkb.length; i++) { 
						this.mainTitle = caijingkb[i].mainNewsTitle;//财经快报标题
						this.writer = caijingkb[i].mainNewsWriter;//作者
						this.imgUrl = caijingkb[i].mainPicUrl;//财经快报图片
						this.soundUrl = caijingkb[i].mainSoundUrl;//关联音频
						this.bL_ID = caijingkb[i].bL_ID;//财经快报id
						var cjItrm = new Object();
						cjItrm.content = caijingkb[i].bL_DTL;//财经快报内容
						cjItrm.type = caijingkb[i].bL_TYP;//财经快报类型
						cjAllList.push(cjItrm)
						//console.log("财经快报图片地址||||||||||||||||||||"+caijingkb[i].mainPicUrl+"#####"+this.stringAnd);
					}
					this.caijingList = cjAllList;
					uni.hideLoading()
					console.log("财经快报评论ID----"+this.bL_ID)
					this.getData(this.bL_ID);
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		methods:{			
			getData(id){
				uni.request({
					method: 'POST',
					url: global.api.querykbComment,
					header : {'content-type':'application/x-www-form-urlencoded'},
					data: {
						token: this.token,
						bl_Id: id,
						pagNum:page
					},
				 
					dataType: 'json',
					success: (res) => {
						/* this.resultData = res.data;
						this.product=res.data.data.product;
						this.videoUrl=res.data.data.videoUrl;
						this.productBeiAnUrl=res.data.data.productBeiAnUrl;
						this.productTagList=res.data.data.productTagList;
						this.viewCount=res.data.data.viewCount; */
						this.cjpingLunList=res.data.data.newsCommentsList;
						if(this.cjpingLunList.length==5){
							console.log("财经评论进来了-----------"+this.cjpingLunList.length)
							this.showMoreDiv=true;
						}
						console.log("评论list~~~~~~~~~"+JSON.stringify(this.cjpingLunList));
					},
					fail: (res) => {
						console.log("..............................................fail");
						console.log(JSON.stringify(res));
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
				})
			},
			toPinglun() {
				console.log("跳转财经快报评论---"+this.bL_ID)
				uni.navigateTo({
					url: '../../product/productYemian/pinglun/cjpinglun?bL_ID='+this.bL_ID,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getMoreList: function() {
				console.log("getMoreList================="+this.loadingType)
				//本次加载没有完成，禁止继续下拉
				 if (this.loadingType !== 0) {
					return;
				} 
				//设置状态为加载中。。。
				this.loadingType = 1;
				page++;
				uni.showNavigationBarLoading();
				uni.request({
					url: global.api.querykbComment,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					}, 
					dataType: 'json',
					data: {
						token: this.token,
						bl_Id: this.bL_ID,
						pagNum:page
					},
					//success: function(res) {
					success: (res) => {
						 //console.info("第"+page+"数据为"+JSON.stringify(res.data.data.newsCommentsList));
						//console.log("第" + page + '页共加载' + res.data.data.productPingLunList.length + "条数据")
						//没有更多数据了,2种情况会存在没有更多数据，1是最后一页数据不足每页显示的条数，2是最后一页刚好没数据
						console.log("财经评论更多评论-------"+JSON.stringify(res.data.data.count));
						if (res.data.data.count == 0) {//没有更多评论
							this.loadingType = 2;
							this.showMoreDiv=false;
							return;
						}
						/* //将本次获取到的数据追加到列表中
						_self.productPingLunList = _self.productPingLunList.concat(res.data.data.productPingLunList); */
			
						var tempArray = res.data.data.newsCommentsList;//新的评论
						var havArray = new Array();
						havArray=this.cjpingLunList;
						for (var i = 0; i < tempArray.length; i++) {
							havArray.push(tempArray[i]);
						}
						console.log("加载更多-----"+JSON.stringify(tempArray));
						this.cjpingLunList = havArray;
			
						if (res.data.data.count != 5) {
							console.log("不足五条记录----")
							this.loadingType = 2;
							this.showMoreDiv=false;
							return;
						}
						//设置状态，可以继续下拉加载更多
						this.loadingType = 0; 
						
					},
					complete: function(res) {
						uni.hideNavigationBarLoading();
			
					}
				});
			
			}
		},
		onNavigationBarButtonTap(){
			/* uni.showLoading({
				title: '敬请期待分享！'
			});
			setTimeout(function () {
					uni.hideLoading();
			}, 1000); */
			
			if (this.providerList.length === 0) {
				uni.showModal({
					title: "当前环境无分享渠道!",
					showCancel: false
				})
				return;
			}
			let itemList = this.providerList.map(function (value) {
				return value.name
			})
			uni.showActionSheet({
				itemList: itemList,
				success: (res) => {
					console.log("this.providerList[res.tapIndex].id==="+this.providerList[res.tapIndex].id)
					//console.log("this.providerList[res.tapIndex].type==="+this.providerList[res.tapIndex].type)
					uni.share({
						provider: this.providerList[res.tapIndex].id,
						scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
						type: 0,
						title:this.mainTitle,
						summary: '资源来源新浪财经/Wind资讯等，耀莱财富编辑整理。',
						imageUrl:this.imgUrl,
						href:"http://uniapp.dcloud.io/", 
						success: (res) => {
							console.log("success:" + JSON.stringify(res));
							
						}, 
						fail: (e) => {
							uni.showModal({
								content: e.errMsg,
								showCancel:false
							})
						}
					});
				}
			})
		}
	}
</script>
 
<style scoped>
	page {
		
	}
	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.bottom-tab {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		background: rgb(255, 255, 255);
	}
	.bottom-icon-image {
		margin-top: 15upx;
		height: 40upx;
		width: 40upx;
	}
	.bottom-text {
		color: rgba(153, 153, 153, 1);
		line-height: 40upx;
		font-size: 9px;
	}
	.uni-font17 {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		font-size: 17px;
	
	}
	.videoDetail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-left: 4px solid rgba(203, 147, 89, 1);
		padding-left: 17upx;
		margin: 31upx 0 27upx 0;
	
	}
	.contentMid {
		padding: 30upx 0 30upx 0;
		border-bottom: 5px solid rgba(238, 238, 238, 1);
	}
	
	.mark-image {
		height: 160upx;
		width: 160upx;
		margin-right: 10upx;
	}
	
	.banner,.bannerImg{
		width: 100%;
		height: 370upx;
		padding: 8upx 0 36upx 0;
	}
	.bannerlaber,.bannerImglaber{
		width: 100%;
		height: 70upx;
		 padding: 38upx 0 106upx 0; 
	} 
	.weiba,.bannerImgweiba{
		width: 95%;
		height: 20upx;
		padding: 48upx 20upx 1upx 20upx; 
	} 
	.erweima,.bannerImgerweima{
		width: 100%;
		height: 550upx;
		margin-top: -70upx;
	} 
	.remark{
		padding: 48upx 20upx 36upx 20upx; 
	}
	.top {
		padding: 0 31upx 0 29upx;
		background: white;
	} 

	.audio {
		width: 100%;
	}

	.mark-bot {
	
		font-size: 14px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 42upx;
		margin-top: 14upx;
		margin-left: 85upx;
	}
	
	.mark-images {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.content {
		padding: 10upx 2%;
		width: 96%;
		flex-wrap: wrap;
		background: white;
		margin-bottom: 110upx;
	}

	.title {
		font-size: 20px;

		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		padding: 48upx 0 26upx 0;
	}
	.titleRemark {
		font-size: 12px;
		color: #999999;
		padding: 28upx 0 26upx 0;
	}
	
	.cjwriter {
		font-size: 12px;
		color: rgba(51, 51, 51, 1);
		margin-left: 230upx;
		margin-top: -57upx;
	}

	rich-text {

		line-height: 36upx;
	}

	.position {
		margin-right: 10upx;
	}
	.star {
		display: flex;
		flex-direction: row;
	}
	.star-image-select {
		width: 15px;
		height: 14px;
		margin-right: 10upx;
	}
	
	.mark-right {
		margin-left: 19upx;
	}
	.mark-right .mark-top {
		display: flex;
		flex-direction: row;
	
	}
	
	.mark {
		margin-top: 29upx;
		padding-bottom: 37upx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}
	
	.mark-top-left,
	.mark-right .mark-top {
		align-items: center;
		justify-content: space-between;
	}
	
	.mark-right .time {
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 85upx;
		margin-top: -35upx;

	}
	.mark-top-left {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 44upx;
		font-size: 16px;
		margin-left: 82upx;
		margin-top: -112upx;
	}
	.avator-left,
	.avator-left image {
		height: 80upx;
		width: 80upx;
		border-radius: 50%;

	}
	.article-title {
		font-size: 17px;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 116upx;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.more-mark {
		text-align: center;
		font-weight: 500;
		color: rgba(196, 156, 90, 1);
		line-height: 82upx;
	}
</style>
